<template>
	<el-dialog :visible.sync="options.showDialog" width="800px" class="evalDialog" :append-to-body="true">
		<h3 class="add-title">{{options.title}}</h3>
		<el-form class="form-outer" :model="form" :rules="rules" ref="ruleForm" label-width="120px">
			<el-form-item label="模版名称" prop="templateName">
				<el-input v-model="form.templateName" placeholder="请输入（备注：必须填写）"></el-input>
			</el-form-item>
			<el-form-item label="公司名称" prop="companyName">
				<el-input v-model="form.companyName" placeholder="请输入（备注：必须填写）"></el-input>
			</el-form-item>
			<el-form-item label="公司名称备注">
				<el-input v-model="form.companyNote" placeholder="请输入（备注：非必填）"></el-input>
			</el-form-item>
			<el-form-item label="* 姓名" >
				<el-input disabled placeholder="此处不能填写（备注：代表导入的表格需要有此项）"></el-input>
			</el-form-item>
			<el-form-item label="* 身份证号码" >
				<el-input disabled placeholder="此处不能填写（备注：代表导入的表格需要有此项）"></el-input>
			</el-form-item>
			<el-form-item label="* 账户收入">
				<el-input disabled placeholder="此处不能填写（备注：代表导入的表格需要有此项）"></el-input>
			</el-form-item>
			
			<template v-for="(item,index) in addList" >
				<el-form-item :label="'* ' + item.label" :key="index">
					<el-input disabled placeholder="此处不能填写（备注：代表导入的表格需要有此项）" style="width: 79%;"></el-input>
					<el-button class="deleted-btn" size="small" @click="deletedItem(item)">删除</el-button>
				</el-form-item>
			</template>
		</el-form>
		<div class="add-outer">
			<el-input v-model="newName" placeholder="请输入添加项" class="add-input"></el-input>
			<el-button class="el-icon-plus add-new-name" @click="addName"> 添加</el-button>
		</div>
		<div class="footer-content">
			<p>添加可添加表格标题，模版名称/公司名称/实发工资 为基础存在项 无法删除，模版名称公司名称需要录入，</p>
			<p>实发工资为模版内固定内容标题，添加处可添加标题，添加的标题可删除。确认的模版，可在上一级页面中被选择 再进行导入。</p>
			<el-button type="primary" round class="sub-add" @click="addTemplate" :disabled="isClick">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{
			type: Object,
			require: true
		}
	},
	data(){
		return {
			isClick: false,
			form:{
				templateName: '',									//模板名称
				companyName: '',									//公司名称
				companyNote: '',									//公司名称备注
			},
			newName: '',											//新添加的字段名称
			addList: [												//新增
				/* { label: '基本工资' } */
			],
			rules:{
				templateName: [
					{ required: true, message: '请输入模版名称', trigger: 'blur' },
				],
				companyName: [
					{ required: true, message: '请输入公司名称', trigger: 'blur' },
				]
			}
		}
	},
	methods:{
		/* 删除 */
		deletedItem(data){
			console.log(data);
			this.addList.forEach((item,index) => {
				if(item.label == data.label){
					this.addList.splice(index,1);
				}
			})
		},
		/* 新增字段 */
		addName(){
			let text = this.newName;
			let exist = false;
			if(!this.newName){
				this.$message.warning('请输入添加项名称！');
				return false;
			}
			this.addList.forEach((item,index) => {
				if(item.label == text){
					exist = true;
					return false;
				}
			})
			
			if(exist){
				this.$message.warning('此字段已存在，请重新编辑！');
			}else{
				this.addList.push({
					label: text
				})
				this.newName = '';
			}
		},
		/* 新增模板 */
		addTemplate(){
			this.isClick = true;
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					let params = {
						enteringName: localStorage.getItem('checkHuman'),
						userid: localStorage.getItem('userid'),
						templateName: this.form.templateName,
						companyName: this.form.companyName,
						companyNote: this.form.companyNote
					};
					params.payrollNameDetailsList = ["姓名","身份证号码","账户收入"];
					this.addList.forEach(item => {
						params.payrollNameDetailsList.push(item.label);
					})
					if(this.options.title != '新增模板制作'){
						params.templateid = this.options.userInfo.templateid;
					}
					console.log(params);
					this.$payrollAxios.post('/v1/PayRoll/insertPayrollTmplate',params).then(res => {
						console.log(res);
						if(res.data.code === 1){
							this.clearData();
							this.options.showDialog = false;
							
							if(this.options.title != '新增模板制作'){
								this.$emit('updateTemplateList');
							}
							this.$message.success('操作成功！');
						}else{
							this.$message.warning(res.data.message);
						}
					})
				} else {
					this.$message.warning('请将信息填写完整！');
					return false;
				}
			});
			
			setTimeout(() => {
				this.isClick = false;
			},3000)
		},
		/* 清空数据 */
		clearData(){
			this.newName = '';
			this.addList = [{ label: '基本工资' }];
		}
	},
	watch:{
		'options.showDialog'(){
			if(this.options.showDialog){
				this.addList = [];
				this.isClick = false;
				if(this.options.title != '新增模板制作'){
					let data = this.options.userInfo;
					this.form.templateName = data.templateName;
					this.form.companyName = data.companyName;
					this.form.companyNote = data.companyNote;
					data.payrollNameDetailsList.forEach(item => {
						if(item != '姓名' && item != '身份证号码' && item != '账户收入'){
							this.addList.push({
								label: item
							})
						}
					})
				}
			}
		}
	}
}
</script>

<style scoped="scoped">
.add-title{padding: 30px 0;font-size: 24px;text-align: center;}
.form-outer,.add-outer{width: 600px;margin: 20px auto;}
.deleted-btn{width: 100px;height: 30px;margin-top: 2px;float: right;border: 1px solid red;border-radius: 15px;color: #000;}
.add-new-name{width: 100%;height: 30px;line-height: 30px;padding: 0;border-radius: 15px;margin: 20px 0 0;}
.footer-content{padding: 20px 0;}
.footer-content{text-align: center;}
.footer-content p{line-height: 20px;color: blue;}
.sub-add{width: 120px;margin-top: 20px;}
</style>
